<template>
  <div class="components-score-config gray-box top-redius border-bottom-gray">
    <div class="title">
      {{ $t("user.pointsSet") }}
    </div>
    <el-form
      ref="dataFormRef"
      label-width="180px"
      class="set-form"
      :rules="dataRule"
      :model="dataForm"
      @submit.prevent
    >
      <br>
      <el-form-item
        :label="$t('user.pointsEarnOne')"
        style="width: 440px"
        prop="signInScoreOne"
      >
        <el-input-number
          v-model="signInScoreOne"
          :placeholder="$t('order.score')"
          controls-position="right"
          :precision="0"
          :min="1"
          :max="99999"
        />
      </el-form-item>
      <el-form-item
        :label="$t('user.pointsEarnTwo')"
        style="width: 440px"
        prop="signInScoreTwo"
      >
        <el-input-number
          v-model="signInScoreTwo"
          controls-position="right"
          :precision="0"
          :min="1"
          :max="99999"
          :placeholder="$t('order.score')"
        />
      </el-form-item>
      <el-form-item
        :label="$t('user.pointsEarnThree')"
        style="width: 440px"
        prop="signInScoreThree"
      >
        <el-input-number
          v-model="signInScoreThree"
          controls-position="right"
          :precision="0"
          :min="1"
          :max="99999"
          :placeholder="$t('order.score')"
          type="number"
        />
      </el-form-item>
      <el-form-item
        :label="$t('user.pointsEarnFour')"
        style="width: 440px"
        prop="signInScoreFour"
      >
        <el-input-number
          v-model="signInScoreFour"
          controls-position="right"
          :precision="0"
          :min="1"
          :max="99999"
          :placeholder="$t('order.score')"
          type="number"
        />
      </el-form-item>
      <el-form-item
        :label="$t('user.pointsEarnFive')"
        style="width: 440px"
        prop="signInScoreFive"
      >
        <el-input-number
          v-model="signInScoreFive"
          controls-position="right"
          :precision="0"
          :min="1"
          :max="99999"
          :placeholder="$t('order.score')"
          type="number"
        />
      </el-form-item>
      <el-form-item
        :label="$t('user.pointsEarnSix')"
        style="width: 440px"
        prop="signInScoreSix"
      >
        <el-input-number
          v-model="signInScoreSix"
          controls-position="right"
          :precision="0"
          :min="1"
          :max="99999"
          :placeholder="$t('order.score')"
          type="number"
        />
      </el-form-item>
      <el-form-item
        :label="$t('user.pointsEarnSeven')"
        style="width: 440px"
        prop="signInScoreSeven"
      >
        <el-input-number
          v-model="signInScoreSeven"
          controls-position="right"
          :precision="0"
          :min="1"
          :max="99999"
          :placeholder="$t('order.score')"
          type="number"
        />
      </el-form-item>
      <el-form-item
        :label="$t('user.pointsForRegistration')"
        style="width: 440px"
        prop="registerScore"
      >
        <el-input-number
          v-model="dataForm.registerScore"
          :placeholder="$t('order.score')"
          :precision="0"
          :min="0"
          :max="99999"
          controls-position="right"
          type="number"
        />
      </el-form-item>
      <el-form-item
        v-if="dataForm.shopScoreSwitch"
        :label="$t('user.perPurchase')"
        style="width: 440px"
        prop="shopGetScore"
      >
        <el-input
          v-model="dataForm.shopGetScore"
          type="number"
          min="1"
          max="999999999"
          style="width:350px"
          @change="onSetShopGetScore"
        >
          <template #append>
            {{ $t("coupon.yuan") }}{{ $t("user.earnOnePoint") }}
          </template>
        </el-input>
      </el-form-item>
      <el-form-item
        :label="$t('user.pointsEarnLimit')"
        style="width: 440px"
      >
        <el-radio-group v-model="getDiscountRange">
          <el-radio :label="0">
            {{ $t("user.platformPercent") }}
          </el-radio>
          <el-radio :label="1">
            {{ $t("user.categoryPercent") }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="getDiscountRange === 0"
        :label="$t('user.getPercentLimit')"
      >
        <el-input-number
          v-model="dataForm.getDiscount"
          controls-position="right"
          :min="0"
          :max="100"
          :step="0.1"
          :precision="1"
          :placeholder="$t('user.percent')"
          type="number"
        />
      </el-form-item>
      <el-form-item
        :label="$t('user.pointsSwitch')"
        style="width: 440px"
        prop="shopScoreSwitch"
      >
        <el-switch v-model="dataForm.shopScoreSwitch" />
      </el-form-item>
      <el-form-item
        v-if="dataForm.shopScoreSwitch"
        :label="$t('user.pointsPurchase')"
        style="width: 440px"
        :placeholder="$t('order.score')"
        prop="shopUseScore"
      >
        <el-input
          v-model="dataForm.shopUseScore"
          type="number"
          :min="1"
          :max="1000"
          style="width:350px"
          @change="onSetShopUseScore"
        >
          <template #append>
            {{ $t("user.pointsDeducted") }}
          </template>
        </el-input>
      </el-form-item>

      <el-form-item
        :label="$t('user.pointsUseLimit')"
        style="width: 440px"
      >
        <el-radio-group v-model="useDiscountRange">
          <el-radio :label="0">
            {{ $t("user.platformPercent") }}
          </el-radio>
          <el-radio :label="1">
            {{ $t("user.categoryPercent") }}
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        v-if="useDiscountRange === 0"
        :label="$t('user.usePercentLimit')"
      >
        <el-input-number
          v-model="dataForm.useDiscount"
          controls-position="right"
          :min="0"
          :max="100"
          :precision="1"
          :step="0.1"
          :placeholder="$t('user.percent')"
          type="number"
        />
      </el-form-item>
      <el-table
        v-if="useDiscountRange === 1 || getDiscountRange === 1"
        :data="dataForm.categoryConfigs"
        class="elTable"
        style="width: 1002px"
        border
      >
        <el-table-column
          prop="levelName"
          header-align="center"
          align="center"
          width="250"
          :label="$t('category.categoryName')"
        >
          <template #default="scope">
            <span>{{ scope.row.categoryName }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="levelName"
          header-align="center"
          align="center"
          width="250"
          :label="$t('category.categoryEn')"
        >
          <template #default="scope">
            <span>{{ scope.row.categoryNameEn }}</span>
          </template>
        </el-table-column>

        <el-table-column
          v-if="getDiscountRange === 1"
          prop="presScore"
          :label="$t('user.getPercentLimit')"
          align="center"
          header-align="center"
          width="250"
        >
          <template #default="scope">
            <div class="table-template">
              <el-form-item
                label-width="0px"
                :prop="'categoryConfigs.' + scope.$index + '.getScoreLimit'"
                align="center"
              >
                <el-input-number
                  v-model="scope.row.getScoreLimit"
                  :max="100"
                  :min="0"
                  :precision="1"
                />
              </el-form-item>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="useDiscountRange === 1"
          prop="presScore"
          :label="$t('user.usePercentLimit')"
          header-align="center"
          align="center"
          width="250"
        >
          <template #default="scope">
            <div class="table-template">
              <el-form-item
                label-width="0px"
                :prop="'categoryConfigs.' + scope.$index + '.useScoreLimit'"
                align="center"
              >
                <el-input-number
                  v-model="scope.row.useScoreLimit"
                  :max="100"
                  :min="0"
                  :precision="1"
                />
              </el-form-item>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div
      class="default-btn"
      @click="onSubmit()"
    >
      {{
        $t("sysManagement.save")
      }}
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
let value = ref('')
const dataRule = {
  registerScore: [
    { required: true, message: $t('user.pointsOfRegistrationCannotEmpty'), trigger: 'blur' }
  ],
  shopGetScore: [
    { required: true, message: $t('user.pointsOfShoppingCannotEmpty'), trigger: 'blur' }
  ],
  shopUseScore: [
    { required: true, message: $t('user.shoppingPointsDeductedCannotEmpty'), trigger: 'blur' }
  ]
}

onMounted(() => {
  init()
})
const useDiscountRange = ref(0)
const dataForm = ref({
  id: null,
  registerScore: 0,
  useDiscountRange: 0,
  getDiscountRange: 0,
  signInScore: [],
  shopGetScore: 0,
  useDiscount: 0,
  shopScoreSwitch: false,
  getDiscount: 0,
  shopUseScore: 0,
  categoryConfigs: []
})
const getDiscountRange = ref(0)
const signInScoreOne = ref(0)
const signInScoreTwo = ref(0)
const signInScoreThree = ref(0)
const signInScoreFour = ref(0)
const signInScoreFive = ref(0)
const signInScoreSix = ref(0)
const signInScoreSeven = ref(0)

const init = () => {
  nextTick(() => {
    http({
      url: http.adornUrl('/user/scoreConfig/info/' + 'SCORE_CONFIG'),
      method: 'get',
      params: http.adornParams()
    }).then(({ data }) => {
      dataForm.value = data
      signInScoreOne.value = data.signInScore[0]
      signInScoreTwo.value = data.signInScore[1]
      signInScoreThree.value = data.signInScore[2]
      signInScoreFour.value = data.signInScore[3]
      signInScoreFive.value = data.signInScore[4]
      signInScoreSix.value = data.signInScore[5]
      signInScoreSeven.value = data.signInScore[6]
      if (data.signInScoreString) {
        if (!data.useDiscountRange) {
          useDiscountRange.value = 0
        } else {
          useDiscountRange.value = dataForm.value.useDiscountRange
        }
        if (!data.getDiscountRange) {
          getDiscountRange.value = 0
        } else {
          getDiscountRange.value = dataForm.value.getDiscountRange
        }
      }
      dataForm.value.categoryConfigs = data.categoryConfigs
    })
  })
}
const onSetShopGetScore = () => {
  const num = Math.round(dataForm.value.shopGetScore)
  dataForm.value.shopGetScore = num < 1 ? 1 : num > 999999999 ? 999999999 : num
}
const onSetShopUseScore = () => {
  let num = Math.round(dataForm.value.shopUseScore)
  num = num < 1 ? 1 : num
  num = num > 1000 ? 1000 : num
  dataForm.value.shopUseScore = num
}
let isConfig = false
const comparaConfig = () => {
  isConfig = false
  dataForm.value.categoryConfigs.forEach(item => {
    if (useDiscountRange.value === 1 && !item.useScoreLimit) {
      value = $t('user.usePointsCannotEmpty')
      isConfig = true
      return true
    }
    if (getDiscountRange.value === 1 && !item.getScoreLimit) {
      value = $t('user.getPointsCannotEmpty')
      isConfig = true
      return true
    }
  })
}
// 表单提交
const dataFormRef = ref(null)
const onSubmit = () => {
  comparaConfig()
  if (isConfig) {
    errorMsg(value)
    return
  }
  dataFormRef.value.validate((valid) => {
    if (valid) {
      dataForm.value.signInScore = []
      dataForm.value.useDiscountRange = useDiscountRange.value
      dataForm.value.getDiscountRange = getDiscountRange.value
      dataForm.value.getDiscount = !dataForm.value.getDiscount ? 0 : dataForm.value.getDiscount
      dataForm.value.useDiscount = !dataForm.value.useDiscount ? 0 : dataForm.value.useDiscount
      dataForm.value.signInScore.push(signInScoreOne.value || 0)
      dataForm.value.signInScore.push(signInScoreTwo.value || 0)
      dataForm.value.signInScore.push(signInScoreThree.value || 0)
      dataForm.value.signInScore.push(signInScoreFour.value || 0)
      dataForm.value.signInScore.push(signInScoreFive.value || 0)
      dataForm.value.signInScore.push(signInScoreSix.value || 0)
      dataForm.value.signInScore.push(signInScoreSeven.value || 0)
      http({
        url: http.adornUrl('/user/scoreConfig'),
        method: 'post',
        data: http.adornData(dataForm.value)
      }).then(() => {
        ElMessage({
          message: $t('publics.operation'),
          type: 'success',
          duration: 1500,
          onClose: () => {
            init()
          }
        })
      })
    }
  })
}
const errorMsg = (message) => {
  ElMessage({
    message,
    type: 'error',
    duration: 1500
  })
}

</script>
<style scoped lang="scss">
.components-score-config{
  :deep(.el-input__wrapper){
    width: 300px;
  }
  :deep(.el-table td.el-table__cell div){
    width: 100%;
  }
  :deep(.el-table__body .el-input__inner){

    height: 36px;
  }
}
</style>
